<template>
  <div>
    <p>
      当前角色: <strong>{{ userRole }}</strong>
    </p>
    <div>
      <button @click="changeRole('guest')">设置为访客</button>
      <button @click="changeRole('editor')">设置为编辑</button>
      <button @click="changeRole('admin')">设置为管理员</button>
    </div>
    <p>
      <nuxt-link to="/">首页</nuxt-link> |
      <nuxt-link to="/dashboard">仪表盘</nuxt-link> |
      <nuxt-link to="/editor">编辑器</nuxt-link> |
      <nuxt-link to="/admin">管理员</nuxt-link>
    </p>
  </div>
</template>

<script setup>
// 从数据仓库里面获取用户角色
import { useAuthStore } from "~/store/auth";
const authStore = useAuthStore();
const userRole = computed(() => authStore.userRole);

// 切换用户角色
const changeRole = (role) => {
  authStore.setUserRole(role);
};
</script>
